import { useEffect } from 'react'; // 引入 React 和必要的钩子
import Echar_zhu from '../../components/Echar_zhu';
import { Image, List } from 'antd-mobile';
import './walk.css'
import NavBar from '../../components/NavBer';

function Walk() {

    const XData = ['0:00', '6:00', '12:00', '18:00', '24:00']
    const YData = [201, 827, 1544, 1481, 74]

    return (
        <div className='walk'>
            <NavBar title='走步' />
            <Echar_zhu XData={XData} YData={YData} />

            <div className="main">
                <div className="font">
                    <h5>运动记录</h5>
                    <p>户外步行</p>
                    <p>3.78公里</p>
                </div>
                <Image src='/run.png' />
            </div>

            <div className="main">
                <div className="font">
                    <p style={{ color: '#000' }}>用餐完半小时后，适当饮水，帮助消化~</p>
                    <span>
                        人体水分占到60%，
                        正确的喝水对于身体健康非常重要，
                        尤其是在清晨、运动前后水分补充尤为关键~
                    </span>
                </div>
                <img src='/doctor.png' />
            </div>

            <List style={{marginTop: '0.2rem'}} className='list'>
                <List.Item>近30天运动</List.Item>
                <List.Item>日均  <span>4962</span>步</List.Item>
                <List.Item>日均  <span>3.3</span>公里</List.Item>
                <List.Item>累计节省汽油  <span>1.87</span>升</List.Item>
                <List.Item>累计甩脂  <span>87</span>克</List.Item>
            </List>



        </div>
    );
}

export default Walk;